<template>
    <div>
        <h2>我是用户界面</h2>
        <p>我是用户的相关信息嘿嘿嘿</p>
        <h2>{{ userId }}</h2>
        <h2>{{ $route.params.userId }}</h2>
        <h2>{{ message }}</h2>
    </div>
</template>

<script>
export default {
    name: 'User',
    data() {
        return {
            message: 'Vue.js'
        }
    },
    computed: {
        userId() {
            // 获取到用户ID
            // $router属性可以调用push方法、replace()方法
            // 实际上$router对象就是index.js里面new出来的router对象,原码可以查看
            // 实际上就是new路由里面的内容
            return this.$route.params.userId//lisi
            // $route是当前哪个路由映射处于活跃状态，拿到的就是哪个路由
            // parameters参数，简写params
            // 由于路由映射里面的path为'/user/:userId'，所以这里是userId
            // 如果是'/user/:ttt',这里就要使用ttt

            // 对于组件来讲，对于路由开发有两个重要的属性
            // $router  整个new出来的路由对象
            // $route  谁处于活跃状态，拿到的就是活跃对象
        },
        finalMessage() {
            return this.message
        }
    }
}
</script>

<style scoped>

</style>